<template>
    <div class="order">
        <!-- 导航栏 -->
        <van-sticky>
            <nav-bar title="订单列表"></nav-bar>
            <van-tabs v-model:active="currentOrder" :line-height="2" title-active-color="#ff9854">
                <template v-for="(item, index) in orderTitles">
                    <van-tab :title="item" :name="index"></van-tab>
                </template>
            </van-tabs>
        </van-sticky>
        <div class="content">
            <!-- 订单列表 -->
            <div v-if="orderList">
                <template v-for="(item, index) in orderList">
                    <div class="order-item">
                        <order-item :item-data="item" />
                    </div>
                </template>
            </div>
            <!-- 暂无数据 -->
            <div v-else>
                222
            </div>
        </div>
    </div>
</template>


<script setup>
import navBar from '@/components/nav-bar/nav-bar.vue';
import orderItem from './cpns/order-item/order-item.vue';
import { ref, watch } from 'vue';
import useOrderStore from '@/stores/modules/order';
import { storeToRefs } from 'pinia';

const currentOrder = ref(0)
const orderTitles = ["全部订单", "近期订单", "待支付"]

// 选中currentOrder时，给type赋值
watch(currentOrder, (newVal) => {
    switch (newVal) {
        case 0:
            type.value = 'all'
            break;
        case 1:
            type.value = 'recent'
            break;
        case 2:
            type.value = 'pend'
            break;
    }
})
const type = ref('all')
// 监听type的变化，获取数据
watch(type, (newVal) => {
    orderStore.fetchOrderListData(newVal)
})


// 获取数据
const orderStore = useOrderStore()
orderStore.fetchOrderListData()
const { orderList } = storeToRefs(orderStore)
console.log(orderList);

</script>


<style lang="less" scoped>
.order {
    // height: 100vh;
    --van-tabs-line-height: 40px;
    padding-bottom: 55px;

    .content {
        height: calc(100% - 86px);
        overflow: scroll;
    }
}
</style>